<template>
  <div class="all">
<video src="https://slwl-admin.itheima.net/static/media/video.3cf57b17.mp4" class="video"  autoplay muted loop></video>
    <el-card class="card">
      <el-image class="ii" src="https://slwl-admin.itheima.net/static/img/logo1.33ef7fa0.png"></el-image>
      <el-form :model="ruleForm" status-icon  ref="ruleForm" label-width="23px"  class="demo-ruleForm">
        <el-form-item  prop="pass">
          <el-input  v-model="ruleForm.account" autocomplete="off" style="width: 370px; height: 50px;" prefix-icon="el-icon-user-solid"></el-input>
        </el-form-item>
        <el-form-item  prop="checkPass">
          <el-input prefix-icon="el-icon-unlock"  style="width: 370px; height: 50px;"  placeholder="请输入密码" v-model="ruleForm.password" show-password></el-input>
        </el-form-item>
        <el-form-item >
          <el-input v-model.number="ruleForm.code" style="width: 370px; height: 50px;"  prefix-icon="el-icon-check" placeholder="请输入验证码">
          </el-input>
          <div class="img" @click="refiresh">
          <el-image :src="url" fit="contain"></el-image>
        </div>
        </el-form-item>
        <el-form-item>
          <el-button class="btn" style="background-color: #E15536; font-size: 18px; color: #fff;" @click="login">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>
<script>
import {getVerifyApi,getloginyApi} from '@/api/login'
export default {
  data() {
    return {
      ruleForm: {
        account: "shenlingadmin",
        password: "123456",
        code: "",
        key: "252454C2BF564050C72B986E1676547324758",
      },
      url: "",
    }
  },
  created() {
    this.getVerify();
  },
  methods: {
    //调用验证码
    async getVerify() {
      const res = await getVerifyApi({
        0: "252454C2BF564050C72B986E1676547324758",
        key: "252454C2BF564050C72B986E1676547324758",
      });
      const blob = new Blob([res]);
      const url = window.URL.createObjectURL(blob);
      this.url = url;
    },
   async login() {
     const res = await getloginyApi(this.ruleForm)
     console.log(res);
     this.$store.commit("user/setUserToken", res.data.token.token);
          this.$router.push("/");
          this.$message.success("登录成功");
    },
    refiresh() {
      this.getVerify();
    },
  }
}
</script>
<style lang="scss"  scoped>
*{
  margin: 0;
  padding: 0;
}
.all{
  width: 100vw;
  height: 100vh;
  //padding: 180px;
  //background-color: pink;
}
video {
   position: absolute;
   right: 0;
   bottom: 0;
   min-width: 100%;
   min-height: 100%;
   z-index: -1;
  }

.el-card{
 position: relative;
  width: 600px;
  top: 180px;
  left: 530px;
  width: 450px;
  height: 468px;
}
.ii{
  width: 195px;
  height: 54px;
  margin-top: 28px;
  margin-left: 122px;
  margin-bottom: 20px;
}
.btn{
  width: 370px;
  height: 54px;
  
}
.img {
        position: absolute;
        top: 5px;
        right: 25px;
        width: 71px;
        height: 32px;
        cursor: pointer;
        // background-color: aqua;
        .el-image {
          width: 100%;
          height: 100%;
        }
      }

</style>